<template>
  <el-form ref="ruleForm" class="product-picture" :model="goodsInfo" size="mini" label-position="left">
    <headline :headline="'商品图片'">
      <span slot="head"><el-button type="text" @click="advertisingGuidelines">点击查看《沃尔玛大卖场电商图片标准》</el-button></span>
    </headline>
    <div v-for="(item, index) in fileList" :key="item.title">
      <el-form-item :prop="item.path" :rules="[{ validator: item.validator, trigger: 'blur' }]">
        <div>{{ item.title }}</div>
        <picture-upload
          :is-disabled="isDisabled"
          :file-list="goodsInfo"
          :path="item.path"
          :multiple="item.multiple"
          :pic-number="item.fileNum"
          :pic-size="item.fileSize"
          :type="item.fileTypes"
          :url-name="item.urlName"
          :query-data="createQueryData(index + 1)"
          :upload-data-key="item.uploadDataKey"
          :del-data-key="item.deleteDataKey"
          :del-fun="item.deleteFunction"
          :upload-fun="item.uploadFunction"
        />
        <div class="gray">{{ item.message }}</div>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import pictureUpload from '../../components/pictureUpload.vue'
import { uploadSkuResource, uploadSkuOptionalResource, deleteSkuResource, deleteSkuOptionalResource } from '@/api/coi/onlineTaskAPI/sku'
import { uploadSkuChannelResource, deleteSkuChannelResource } from '@/api/coi/onlineTaskAPI/sku'

const deleteParamKey1 = [
  { key: 'skuId', value: 'skuId' },
  { key: 'url', value: 'resourceUrl' }
]
const uploadParamKey1 = [
  { key: 'file', value: 'raw' },
  { key: 'skuId', value: 'skuId' },
  { key: 'resourceType', value: 'resourceType' }
]
const uploadParamKey2 = [
  { key: 'file', value: 'raw' },
  { key: 'processId', value: 'processId' },
  { key: 'channelId', value: 'channelId' },
  { key: 'resourceUrl', value: 'resourceUrl' },
  { key: 'resourceType', value: 'resourceType' }
]
const editParamKey = [
  { key: 'processId', value: 'processId' },
  { key: 'channelId', value: 'channelId' },
  { key: 'resourceUrl', value: 'resourceUrl' },
  { key: 'resourceType', value: 'resourceType' }
]
export default {
  components: {
    headline,
    pictureUpload
  },
  props: {
    isDisabled: {
      type: Boolean,
      default: true
    },
    goodsInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      fileList: [
        {
          title: '商品主图',
          urlName: 'resourceUrl',
          fileNum: 9,
          fileSize: 3,
          multiple: true,
          path: 'skuResourcesImg',
          fileTypes: ['jpg', 'jpeg'],
          message: '主图至少需要6张，图片尺寸：不低于800px*800px，仅支持JPG格式，大小不超过3MB，您可以拖拽图片调整顺序：',
          uploadDataKey: this.$route.params.type === 'add' ? uploadParamKey1 : uploadParamKey2,
          uploadFunction: this.$route.params.type === 'add' ? uploadSkuResource : uploadSkuChannelResource,
          deleteDataKey: this.$route.params.type === 'add' ? deleteParamKey1 : editParamKey,
          deleteFunction: this.$route.params.type === 'add' ? deleteSkuResource : deleteSkuChannelResource,
          validator: (rule, value, callback) => {
            if (value.length < 6 || value.length > 9) callback(new Error('主图的数量不少于6张，不多于9张'))
            else callback('')
          }
        },
        {
          title: '商品素材图',
          urlName: 'resourceUrl',
          fileNum: 30,
          fileSize: 3,
          multiple: true,
          path: 'skuOptionResources',
          fileTypes: ['png', 'jpg', 'jpeg'],
          message: '素材图最多30张，图片尺寸：不低于800px*800px，仅支持JPG,PNG格式，大小不超过3MB',
          uploadDataKey: this.$route.params.type === 'add' ? uploadParamKey1 : uploadParamKey2,
          uploadFunction: this.$route.params.type === 'add' ? uploadSkuResource : uploadSkuChannelResource,
          deleteDataKey: this.$route.params.type === 'add' ? deleteParamKey1 : editParamKey,
          deleteFunction: this.$route.params.type === 'add' ? deleteSkuOptionalResource : deleteSkuChannelResource,
          validator: (rule, value, callback) => {
            if (value.length > 30) callback(new Error('素材图不能超过30张'))
            else callback('')
          }
        },
        {
          title: '商品透明图',
          urlName: 'resourceUrl',
          fileNum: 1,
          fileSize: 3,
          multiple: false,
          path: 'transparentImg',
          fileTypes: ['png'],
          message: '图片尺寸: 不低于800px*800px,仅支持PNG格式，大小不超过3MB, 图片需透明背景，需与前台展示首图一致（用现有首图抠图）',
          uploadDataKey: this.$route.params.type === 'add' ? uploadParamKey1 : uploadParamKey2,
          uploadFunction: this.$route.params.type === 'add' ? uploadSkuOptionalResource : uploadSkuChannelResource,
          deleteDataKey: this.$route.params.type === 'add' ? deleteParamKey1 : editParamKey,
          deleteFunction: this.$route.params.type === 'add' ? deleteSkuResource : deleteSkuChannelResource,
          validator: (rule, value, callback) => {
            if (value.length !== 1) callback(new Error('透图的数量不等于1张'))
            else callback('')
          }
        }
      ]
    }
  },
  methods: {
    createQueryData(index) {
      if (this.$route.params.type === 'add') {
        return { skuId: this.$route.params.upc, resourceType: index }
      } else {
        return {
          resourceType: index,
          processId: this.$route.query.processId,
          channelId: this.$route.query.channelId
        }
      }
    },
    advertisingGuidelines() {
      const guideBaseUrl = window.appConfig.operationGuideUrl
      window.open(`${guideBaseUrl}/display/PDF/沃尔玛大卖场商品主图标准.pdf`)
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.gray {
  color: rgb(182, 182, 182);
}
</style>
